<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active {
            background: green;
            font-size: 20px;
        }
        
        .aa>li:hover {
            border: 1px solid palevioletred;
        }
    </style>
</head>

<body>
    <div id="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </div>
    <div id="box1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li id="li">5</li>
    </div>
    <div id="box3">


    </div>
    <div id="box4">
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
        <li>005</li>
        <li>006</li>
    </div>
    <div id="box5">
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
        <li>005</li>
        <li>006</li>
    </div>
    <script>
        //熟练掌握  innerHTML  style  className  获取节点 通过 id  通过标签名 既可作出
        //1.通过改变box下第一个li的class类 实现 让这个li背景为绿色 字体大小为20px
        //2.让box1下第一个li的背景色变为红色
        //3.实现给box3添加html内容 添加3个p标签 p标签内容分别为1 2 3
        //4.通过添加类 让box1下所有的li滑过 加border
        //5.弹出box1下最后一个li的id
        //6.声明两个 变量 m和n
        // var m = "过了星期三，翻过一座山"
        // var n = "过了星期五，就剩一上午"
        // 把他们放入p标签中  然后放到box3里
        //7.设置刚刚写好的p标签的颜色为天空蓝(通过行内样式写)
        //8.清空box4
        //9.修改box5中第一个li的内容  "不工作你养我啊  我养你"
        //10.修改box5中最后一个li的内容为 "曾经有一份真挚的爱情摆在我的面前我却没有珍惜等到失去了追悔莫及"
    </script>
</body>

</html>